<!-- 用户列表 -->
<template>
  <div class="userlist">
    <el-button @click="downStudent">下载</el-button>
    <el-tabs v-model="level" @tab-click="handleClick">
      <el-tab-pane
        v-for="tabList in tabLists"
        :key="tabList.level"
        :label="tabList.name"
        :name="tabList.level"
      ></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData.data" style="width: 100%" border>
      <el-table-column label="学号" prop="id" sortable> </el-table-column>
      <el-table-column label="姓名" prop="username"> </el-table-column>
      <el-table-column label="性别" prop="sex"> </el-table-column>
      <el-table-column label="身份" prop="level"> </el-table-column>
      <el-table-column label="等级" prop="is_vip">
        <template slot-scope="text">
          {{ text ? '会员' : '普通用户' }}
          <!-- <el-switch
            v-model="scope.row.is_vip"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            active-text="可用"
            inactive-text="禁用"
          ></el-switch> -->
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age" sortable> </el-table-column>
      <el-table-column width="180">
        <template slot="header"> 操作 </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
          <!-- @click="dialogVisible = true" -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 15, 25, 35]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.count"
    >
    </el-pagination>

    <!-- //删除模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>你确认要删除此用户吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteUser">删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import axios from "axios";
import Setting from "@/utils/setting.js";
import { userDelApi, downStudent } from "@/api/users";
// import { loginApi } from '../../../api/users';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      Setting:Setting,
      dialogVisible: false,
      search: "",
      activeName: "first",
      tabLists: [
        {
          level: "all",
          name: "全部",
        },
        {
          level: "0",
          name: "管理员",
        },
        {
          level: "1",
          name: "学生",
        },
        {
          level: "2",
          name: "班主任",
        },
        // {
        //   level: "4",
        //   name: "普通用户",
        // },
        // {
        //   level: "5",
        //   name: "会员",
        // },
      ],
      deleUser: {},
      // currentPage4: 4,
      page: 1,
      size: 10,
      level: "all",
    };
  },
  computed: {
    tableData() {
      return this.$store.state.users.userList;
    },
  },
  methods: {
    handleClick(tab) {
      this.page = 1;
      this.level = tab.name;
      this.getUserList();
    },
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log(row.id);
      this.$router.push({
        path: `/admin/users/eidt/${row.id}`,
      });
    },
    handleDelete(index, row) {
      this.dialogVisible = true;
      this.deleUser = row;
      // console.log(this.deleUser);
    },
    deleteUser() {
      // console.log(this.deleUser);
      userDelApi(this.deleUser).then(() => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.dialogVisible = false;
        this.getUserList();
      });
    },
    downStudent () {
      downStudent().then()
    },
    handleSizeChange(val) {
      this.page = 1;
      // console.log(`每页 ${val} 条`);
      this.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getUserList();
    },
    getUserList() {
      this.$store.dispatch("actChangeUserList", {
        page: this.page,
        size: this.size,
        level: this.level,
      });
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>
<style lang="less">
.el-pagination {
  margin-top: 20px;
}
</style>